<!-- 模板/DOM -->
<template>

   <!-- navbar -->
   <!-- <MyNavBar></MyNavBar> -->

   <!-- 路由对应的目标组件的承载容器 -->
   <main>
      <!-- 无动画 -->
      <!-- <RouterView /> -->

      <!-- 添加组件的切换动画 -->
      <router-view v-slot="{ Component }">
         <!-- 动画过渡模式 先切走 再切入 -->
         <transition name="slide-fade" mode="out-in">
            <component :is="Component" />
         </transition>
      </router-view>
   </main>

   <!-- tabbar -->
   <!-- v-show="$route.name!=='detail'" 当前的实时路由不为“detail详情页”时显示tabbar -->
   <nav
      class="tab-wrapper"
      v-show="!$route.meta.hideTabBar">
      <!-- 路由链接 渲染完就是a标签 -->
      <!-- <RouterLink to="/">首页</RouterLink>
        <RouterLink to="/about">个人中心</RouterLink> -->
      <RouterLink
         active-class="active"
         class="tab"
         :class="{ active: $route.path.startsWith('/film/') }"
         to="/film">
         <p><i class="fa fa-youtube-play"></i></p>
         <p>电影</p>
      </RouterLink>

      <RouterLink
         active-class="active"
         class="tab"
         to="/cinema">
         <p><i class="fa fa-windows"></i></p>
         <p>影院</p>
      </RouterLink>

      <RouterLink
         active-class="active"
         class="tab"
         to="/news">
         <p><i class="fa fa-twitch"></i></p>
         <p>资讯</p>
      </RouterLink>

      <RouterLink
         active-class="active"
         class="tab"
         to="/mine">
         <p><i class="fa fa-user-circle-o"></i></p>
         <p>我的</p>
      </RouterLink>
   </nav>
</template>

<!-- .vue=SFC=SingleFileComponent=单文件组件=页面中的一小片内容=一小片（自带模板+样式+脚本）的页面片段 -->
<!-- 脚本 -->
<script setup>
import { RouterLink, RouterView } from "vue-router";
import router from "./router";

// import { onUpdated } from "vue";
// import { useRoute } from "vue-router";
// const route = useRoute();
// onUpdated(() => {
//   console.log("onUpdated", route);
// });
</script>

<!-- 样式 scoped=当前样式只作用于当前组件，而不会穿透给子组件 -->
<style lang="scss" scoped>
@import "./assets/variable.scss";

main {
   height: calc(100vh - 50px);
   overflow: scroll;
   // margin-bottom: 50px;
}

.container {
   margin-bottom: 50px;
}

.tab-wrapper {
   position: fixed;
   width: 100%;
   bottom: 0;
   border-top: 1px solid $myLightGray;
   display: flex;
   background-color: white;

   .tab {
      height: 49px;
      // line-height: 49px;
      flex-grow: 1;
      text-align: center;
      display: flex;
      flex-direction: column;
      justify-content: center;
      text-decoration: none;
      color: #888;

      p {
         font-size: 12px;
         i {
            font-size: 20px;
         }
      }
   }

   .tab.active {
      color: $myOrange;
   }
}

/* 定义组件切换动画 */
/* 组件入场动画 + 组件离场动画 */
.slide-fade-enter-active,
.slide-fade-leave-active {
   transition: all 0.5s ease;
}

/* 组件进入之前 + 组件离去以后的状态 */
.slide-fade-enter-from,
.slide-fade-leave-to {
   opacity: 0;
   transform: translateY(20px);
}
</style>
